<template>
	<div class="container">
		<!-- 搜索栏 -->
		<div>
			<van-search v-model="searchValue" show-action placeholder="想找什么车" @search="onSearch" background="#4fc08d">
				<template #action>
					<div @click="onSearch">搜索</div>
				</template>
			</van-search>
		</div>
		<!-- 轮播图 -->
		<div>
			<van-swipe :autoplay="3000" indicator-color="white" style="height: 100%;">
				<van-swipe-item v-for="(car,index) in carouselUsedcarList">
					<div style="position:relative;" @click="onCarDetail(car.usedcarId)">
						<van-image fit="contain" :src="car.img" />
						<p style="position: absolute; left: 15px; top: 80%; color: #55ff7f; font-size: 16px;">
							{{car.usedcarTitleName}}
						</p>
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 方格 -->
		<div>
			<van-grid :column-num="3">
				<van-grid-item to="/usedcar">
					<van-image width="80px" height="80px" :src="require('../assets/home/a.png')" />
					<p style="margin: 0px;">找车</p>
				</van-grid-item>
				<van-grid-item to="/page/todayUsedcar">
					<van-image width="80px" height="80px" :src="require('../assets/home/b.png')" />
					<p style="margin: 0px;">今日上新车辆</p>
				</van-grid-item>
				<van-grid-item to="/page/sellerMap">
					<van-image width="80px" height="80px" :src="require('../assets/home/c.png')" />
					<p style="margin: 0px;">地图找店</p>
				</van-grid-item>
			</van-grid>
		</div>
		<!-- 推荐车辆 -->
		<div class="car">
			<van-tag type="primary" mark size="large" style="width: 60px; ">推荐车辆</van-tag>
			<usedcar-list :data="recommendUsedcarList" @onBtnClick="onCarDetail"></usedcar-list>
		</div>
		<!-- 底部备案信息 -->
		<div style="background-color: #969799;">
			<van-row type="flex" justify="center">
				<van-col>
					<p style="font-size: 15px; margin-bottom: 3px;">© 2020 zhaoguangcloud.cn — All Rights Reserved.</p>
					<p style="font-size: 15px; margin-top: 3px;"> 备案号：<a
							href="http://www.beian.miit.gov.cn">桂ICP备19000265号</a></p>
				</van-col>
			</van-row>
		</div>
		<my-tabbar :active="tabbarName"></my-tabbar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabbarName: "home", //底部导航栏名称
				searchValue: '', //搜索关键字
				//轮播图车辆列表
				carouselUsedcarList: [],
				//推荐车辆列表
				recommendUsedcarList: []
			}
		},
		mounted() {
			this.loadCarousel()
			this.loadRecommend()
		},
		methods: {
			//加载轮播图
			loadCarousel() {
				let _this = this
				_this.$axios({
					method: 'get',
					url: '/carousel/findAllCarousel'
				}).then((resp) => {
					_this.carouselUsedcarList = resp.data
				})
			},
			//加载推荐车辆
			loadRecommend() {
				let _this = this
				_this.$axios({
					method: 'get',
					url: '/recommend/findAllRecommendForUser'
				}).then((resp) => {
					_this.recommendUsedcarList = resp.data
				})
			},
			//搜索功能，跳转到选车界面
			onSearch() {
				this.$router.push({
					path: "/usedcar",
					query: {
						searchValue: this.searchValue
					}
				})
			},
			//车辆详情页
			onCarDetail(carId) {
				this.$router.push({
					path: "/page/detail",
					query: {
						id: carId
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		margin-bottom: 60px;
	}
</style>
